<template>
    <div
        class="largecancelqry-contnair"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <!-- 油心分专项分期申请撤销 -->
        <!-- <el-card shadow="never" v-loading="isLoading"
      element-loading-background="rgba(250, 250, 250, 0.7)">
      <div slot="headerss" class="clearfix">
        <span>油心分专项分期申请撤销</span>
        <el-button style="float: right; padding: 3px 20px;" type="text">关 闭</el-button>
        </div>-->
        <cardComponent pageTitle="油心分专项分期申请撤销">
            <template slot="cardBody">
                <el-form ref="form" :model="largeqryForm" label-width="100px" size="small">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="主卡卡号 : ">
                                <el-input
                                    disabled
                                    v-model="largeqryForm.CARDNBR"
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item size="small" label-width="15px">
                                <el-button type="primary" size="small" @click="onTrial">查 询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- </el-card> -->

                <!-- 油心分专项分期申请撤销详情 -->
                <el-card
                    shadow="never"
                    v-loading="isLoading"
                    element-loading-background="rgba(250, 250, 250, 0.7)"
                    v-if="showTrial"
                >
                    <div slot="headerss" class="clearfix">
                        <span>油心分专项分期申请撤销详情</span>
                        <el-button
                            style="float: right; padding: 3px 20px;"
                            type="text"
                            @click="showTrial = false"
                        >关 闭</el-button>
                    </div>
                    <div>
                        <el-table
                            :data="DataList"
                            border
                            stripe
                            style="width: 1540px;"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            class="heard-bg business_table"
                        >
                            <el-table-column width="30">
                                <template slot-scope="scope">
                                    <el-radio v-model="id" :label="scope.row.APPREF">{{" "}}</el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column prop="INPDATE" label="申请录入日期" min-width="105"></el-table-column>
                            <el-table-column prop="MERCHANT" label="商户编号" min-width="80"></el-table-column>
                            <el-table-column prop="PRPRDID" label="商品编号" min-width="120"></el-table-column>
                            <el-table-column prop="PRONAME" label="商品名称" min-width="150"></el-table-column>
                            <el-table-column prop="MPAMT" label="商品金额" min-width="92"></el-table-column>
                            <el-table-column prop="NBRMTHS" label="分期期数" min-width="77"></el-table-column>
                            <el-table-column prop="STATUS_1" label="状 态" min-width="110"></el-table-column>
                            <el-table-column prop="INPSRC_1" label="交易来源" min-width="110"></el-table-column>
                            <el-table-column prop="AUTHDAY" label="授权日期" min-width="95"></el-table-column>
                            <el-table-column prop="MATCHDAY" label="请款日期" min-width="95"></el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-button type="primary" size="small" @click="onChoice">申请撤销</el-button>
                            <el-button
                                :disabled="currentPageIndex <= 0"
                                type="primary"
                                size="small"
                                @click="handleChangePage('pre')"
                            >上一页</el-button>
                            <el-button
                                :disabled="nextButtonFlag"
                                type="primary"
                                size="small"
                                @click="handleChangePage('next')"
                            >下一页</el-button>
                        </div>
                    </div>
                </el-card>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { setNumber, ChangePage } from '@/utils/Object';
import { get_3xxx, get_4xxx } from '@/apis/getAPIClass';
import { getDictSelectList } from '@/utils/Common';

export default {
    data() {
        return {
            largeqryForm: {
                CARDNBR: '',
            },
            tableData: [],
            id: '',
            currentRow: null,
            DataList: [],
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页,
            nextButtonFlag: true, // 下翻页按钮 显示控制阀
            showTrial: false,
            isLoading: false,
            APPREF: '',
            RTNIND: '',
            STATUSList: [],
            INPSRCList: [],
            _4098res: {},
        };
    },
    mounted() {
        this.onLoadOBJ();
    },
    name: 'largecancelqry',
    components: {
        cardComponent,
    },
    computed: {
        ...mapState({
            defaultParams: state => state.common.defaultParams, // 接口默认参数
            cardInfo_3004: state => state.common.cardInfo_3004,
            pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        }),
    },
    methods: {
        // 页面加载获取页面数据
        async onLoadOBJ() {
            this.largeqryForm.CARDNBR = this.cardInfo_3004.CARDNO;
            this.STATUSList = await getDictSelectList('MPAPPSTATUS', this);
            this.INPSRCList = await getDictSelectList('INPSRC', this);
        },
        // 查询
        onTrial() {
            this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
            this.id = '';
            this.currentRow = null;
            this.APPREF = '';
            this.RTNIND = '';
            this.get_3046();
        },
        async get_3046() {
            // 3046 配置请求头
            const appBody_3046 = {
                CARDNBR: this.largeqryForm.CARDNBR,
                OPT: 1,
                PINFLAG: this.pinFlag,
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                APPREF: this.APPREF,
            };
            let bool = false;
            if (this.pagingDataList.length === 0) bool = true;

            const result_3046 = await get_3xxx(
                '3046',
                '油心分专项分期查询',
                appBody_3046,
                this,
                true,
                bool,
            );

            // 成功之后当前显示
            this.isLoading = false;
            if (!result_3046) {
                if (this.pagingDataList.length != 0) {
                    this.$message.warning('已经到最后一条数据');
                }
                this.nextButtonFlag = true;
                return false;
            }
            const res = result_3046.body.appBody.dataList;

            res.forEach((element) => {
                if (element.MATCHDAY.trim()) element.MATCHDAY = moment(`${element.MATCHDAY}`).format('YYYY-MM-DD');
                if (element.AUTHDAY.trim()) element.AUTHDAY = moment(`${element.AUTHDAY}`).format('YYYY-MM-DD');
                if (element.INPDATE.trim()) element.INPDATE = moment(`${element.INPDATE}`).format('YYYY-MM-DD');

                // 设置状态情况
                element.STATUS_1 = element.STATUS;
                this.STATUSList.forEach((i) => {
                    if ((`${element.STATUS}`).trim() == i.code) {
                        element.STATUS_1 = i.label;
                    }
                });

                element.INPSRC_1 = '';
                this.INPSRCList.forEach((i) => {
                    if ((`${element.INPSRC}`).trim() == i.code) {
                        element.INPSRC_1 = i.label;
                    }
                });
            });
            this.DataList = [...res];

            this.showTrial = true;
            ChangePage(this, ['APPREF'], 'DataList');

            this.isLoading = false;
        },
        // 申请撤销 4098
        async onChoice() {
            if (this.currentRow === null) {
                return this.$alert('请选择一条记录列表！', '按日贷款撤销延期提示！', {
                    confirmButtonText: '确定',
                    center: true,
                    customClass: 'warning ',
                    showClose: false,
                });
            }
            const confirmResult = await this.$confirm(
                '此操作将对消油心分专项分期撤销, 是否继续?',
                '油心分专项分期提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'warning', type: 'warning',
                },
            ).catch(err => err);
            if (confirmResult !== 'confirm') return this.$message.info('已取消油心分专项分期申请撤销');
            this.isLoading = true;
            // 查询
            const qur_4098 = await this.get_4098(0, '', this.DataList[0].APPREF);
            // 撤销
            const cel_4098 = await this.get_4098(
                2,
                3,
                this.currentRow.APPREF,
                this.currentRow.PRPRDID,
                this.currentRow.MPAMT,
                this.currentRow.NBRMTHS,
            );
            if (cel_4098) {
                this.onTrial();
                return this.$alert('油心分专项分期撤销成功', '油心分专项分期提示！', {
                    confirmButtonText: '确定',
                    center: true,
                    customClass: 'success', type: 'success',
                    showClose: false,
                });
            }
            console.log(qur_4098, cel_4098);
        },
        async get_4098(
            OPERTP = 0,
            PATTERN = '',
            MPAPPREF = '',
            PRODID = '',
            MPAMT = '',
            MONTHS = '',
        ) {
            // 4098 配置请求头
            const appBody_4098 = {
                CARDNBR: this.largeqryForm.CARDNBR,
                OPERTP, // 操作类型0：查询  1：申请  2：当日撤销  3：试算
                PATTERN, // 操作类型为1和2时必填 1：现金贷款类大额分期（出文件放款）2：现金贷款类大额分期（实时放款到主账户）3:现金贷款类大额分期（日终请款）4:现金贷款类大额分期（日终请款、出交易明细流水）
                MPAPPREF, // 申请书编号操作类型为0时必填 操作类型为2，申请书编号、原始系统跟踪号+原始交易时间，必填其一。同时填写时，优先使用撤销申请书编号。
                PINFLAG: this.pinFlag,
                MPAMT, // 申请金额
                MONTHS, // 分期期数
                PRODID, // 分期商品编号
            };
            console.log(appBody_4098);
            const result_4098 = await get_4xxx(
                '4098',
                '油心分专项分期',
                appBody_4098,
                this,
                false,
            );
            // console.log(result_4098, "_4098");
            if (!result_4098) return false;
            return result_4098;
            // if ((OPERTP = 0)) {
            //   this._4098res = result_4098.body.appBody;
            //   console.log(this._4098res, "OPERTP = 0")
            // }
            // if ((OPERTP = 2)) {
            //   console.log(result_4098, "OPERTP = 2")
            //   this.isLoading = false;
            //   return this.$alert(
            //     `油心分专项分期撤销成功`,
            //     "油心分专项分期提示！",
            //     {
            //       confirmButtonText: "确定",
            //       center: true,
            //       type: "success",
            //       showClose: false
            //     }
            //   );
            // }
            // 成功之后当前显示
            this.isLoading = false;
            this.isLoading = false;
        },
        handleCurrentChange(val) {
            console.log(val);
            this.currentRow = val;
            if (!val) return false;
            this.id = val.APPREF;
        },
        // 上下页切换
        handleChangePage(type) {
            this.currentRow = null;
            this.id = '';
            if (type === 'pre') {
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询

                    this.APPREF = '';
                    this.RTNIND = '';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.APPREF = this.pagingDataList[this.currentPageIndex].APPREF;
                }
                this.get_3046();
            } else {
                // 切换到下一页
                this.get_3046();
            }
        },
        onSubmit() {
            console.log('submit!');
        },
    },
};
</script>

<style  scoped lang="scss">
.largecancelqry-contnair {
    /deep/.el-card__header {
        padding: 8px !important;
    }
    /deep/.form-row {
        width: 100%;
        margin: 0 auto;
        .el-form {
            //   text-align: left;
            margin: 0 auto;
            //   width: 500px;
        }
        .el-select {
            width: 100%;
            margin-bottom: 15px;
        }
    }

    .footer {
        text-align: center;
        margin-top: 8px;
    }
}
</style>
